$(function () {
    // 定义一个全局变量
    //将来筛选分页都可以修改
    let layer = layui.layer
    let query = {
        pagenum: '1',   //页码值
        pagesize: '3', //每页显示多少条数据
        cate_id: '',
        state: ''
    }
    //需求1 展示文章列表
    initArticleList()
    function initArticleList() {
        axios({
            method: 'get',
            url: '/my/article/list',
            params: query,
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // layer.msg(res.data.message)
            // 渲染页面
            let ary = []
            res.data.data.forEach(function (ele) {
                ary.push(`
                     <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${dataFormat(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href='/article/art_edit.html?id=${ele.Id}' class="layui-btn layui-btn-xs">编辑</a>
                            <button data-id='${ele.Id}' class="btn_del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            })
            let str = ary.join('')
            $('tbody').empty().html(str)
            // 分页
            pageRender(res.data.total)
        })
    }

    //需求2 初始化文章列表
    let form = layui.form
    initArtCateList()
    function initArtCateList() {
        // 发送请求
        axios({
            method: 'get',
            url: '/my/article/cates'
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status) {
                return layer.msg(res.data.message)
            }
            let ary = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(function (item) {
                ary.push(`<option value="${item.Id}">${item.name}</option>`)
            })
            //赋值
            let str = ary.join()
            $('[name="cate_id"]').empty().html(str)
            //form 表单同步渲染
            form.render();
        })
    }
    //需求3 筛选
    $('form').on('submit', function (e) {
        e.preventDefault()
        // 改分类id和分类状态两个属性值
        query.cate_id = $('[name="cate_id"]').val()
        query.state = $('[name="state"]').val()
        // 重新调用初始化文章列表(不是文章分类列表)
        initArticleList()
    })
    //需求4 分页
    var laypage = layui.laypage;
    function pageRender(total) {
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 pageBox 是 ID，不用加 # 号
            count: total,//数据总数，从服务端得到
            limit: query.pagesize,//每页显示多少条数据
            curr: query.pagenum, //页码值
            //配置定制化的分页
            layout: ['count', 'limit', 'prev', 'page', 'next'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); 
                //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); 
                //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    //修改参数 重新渲染页面
                    query.pagesize = obj.limit
                    query.pagenum = obj.curr
                    initArticleList()
                }
            }
        });
    }

    //需求5 删除文章功能
    $('tbody').on('click', '.btn_del', function () {
        // 获取删除按钮id
        let id = $(this).attr('data-id')
        //弹出确认删除对话框
        layer.confirm('确认是否删除?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: 'get',
                url: '/my/article/delete/' + id
            }).then(function (res) {
                // console.log(res.data);
                if (res.data.status != 0) {
                    return layer.msg(res.data.message)
                }
                //成功提示
                layer.msg('文章删除成功')
                //如果当前页只剩下一条数据,而且删除成功了 query.pagenum自减1
                //当前页要大于等于2 ,没有第0页,第一页就不能减少了
                if ($('.btn_del').length == 1 && query.pagenum >= 2) {
                    query.pagenum--
                }
                // 重新渲染页面
                initArticleList()

            })
            // 无论是否删除 都要关闭弹出层
            layer.close(index);
        });
    })

    //需求6
    //需求7
    //需求8
})